<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <!--引入外部css-->
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<!--
			1. 创一个最外层div
			2. 第一部份: LOGO部分: 嵌套三个div
			3. 第二部分: 导航栏部分 : 放置5个超链接
			4. 第三部分: 轮播图
			5. 第四部分:
			6. 第五部分: 直接放一张图片
			7. 第六部分: 抄第四部分的
			8. 第七部分: 放置一张图片
			9. 第八部分: 放一堆超链接
		-->
     <div>
         <!--2. 第一部份: LOGO部分: 嵌套三个div-->
         <div>
             <div class="logo">
                 <img src="../img/logoye.jpg" width="40%" height="80%"/>
             </div>
             <div class="logo">
                 <img src="../img/header.jpg">
             </div>
             <div class="logo" style="text-align: center;">
                 <a href="#">登录</a>
                 <a href="#">注册</a>
                 <a href="#">购物车</a>
             </div>
         </div>

         <!--清除浮动-->
         <div style="clear: both;"></div>

         <!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
         <div id="dao_hang">
             <a href="#" class="amenu">首页</a>
             <a href="#" class="amenu">手机数码</a>
             <a href="#" class="amenu">电脑办公</a>
             <a href="#" class="amenu">鞋靴箱包</a>
             <a href="#" class="amenu">香烟酒水</a>
         </div>

         <!--4. 第三部分: 轮播图-->
         <div>
             <img src="../img/1.jpg" width="100%">
         </div>

         <!--5. 第四部分:排列-->
         <div>
             <div><h2>最新商品<img src="../img/title2.jpg"></h2></div>

             <!--左侧广告图-->
             <div style="width: 15%;height: 480px;float: left" >
                 <img src="../products/hao/big01.jpg" width="100%" height="100%">
             </div>
             <!--
                                 右侧商品
                             -->
             <div style="width: 84%; height: 480px;float: left;">
                 <div style="height: 240px; width: 50%; float: left;">
                     <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>

             </div>
         </div>

         <!--6. 第五部分: 直接放一张图片-->
         <div>
             <img src="../products/hao/ad.jpg" width="100%"/>
         </div>

         <!--7. 第六部分: 抄第四部分的-->
         <div>
             <div><h2>最新商品<img src="../img/title2.jpg"></h2></div>

             <!--左侧广告图-->
             <div style="width: 15%;height: 480px;float: left" >
                 <img src="../products/hao/big01.jpg" width="100%" height="100%">
             </div>
             <!--
                                 右侧商品
                             -->
             <div style="width: 84%; height: 480px;float: left;">
                 <div style="height: 240px; width: 50%; float: left;">
                     <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>
                 <div class="product">
                     <img src="../products/hao/small08.jpg" />
                     <p>高压锅</p>
                     <p style="color: red;">$998</p>
                 </div>

             </div>
         </div>
         <!--8. 第七部分: 放置一张图片-->
         <div>
             <img src="../img/footer.jpg" width="100%"/>
         </div>
         <!--9. 第八部分: 放一堆超链接-->
         <div class="bottom">
             <a href="#">关于我们</a>
             <a href="#">联系我们</a>
             <a href="#">招贤纳士</a>
             <a href="#">法律声明</a>
             <a href="#">友情链接</a>
             <a href="#">支付方式</a>
             <a href="#">配送方式</a>
             <a href="#">服务声明</a>
             <a href="#">广告声明</a>
             <br>
             Copyright © 2005-2016 叶商城 版权所有
         </div>
     </div>
</body>
</html>